<template>
    <div class="common-form-wrap" ref="common_form_wrap">
        <div class="common-form-item"
             v-for="(v, i) in fieldsList"
             :key="keyList[i]"
             ref="form_wrap"
        >
            <div style="display: flex; align-items: center; justify-content: center">
                <div class="common-form-label" v-if="v.name">{{v.name ? (v.name + '：') : '' }}</div>
                <opts
                    :items="v"
                    v-model="form[v.code]"
                    :title="form[v.code]"
                ></opts>
            </div>
        </div>
        <div class="common-form-item">
            <div style="display: flex; align-items: center; justify-content: center">
                <slot name="formBtn"></slot>
            </div>
        </div>
        <div class="common-form-table" v-if="!hideTable">
            <el-table
                :data="tableData"
                stripe
                :height="tableHeight"
                ref="tableWrap"
                style="width: 100%">
                <el-table-column v-if="isExpand" type="expand">
                  <template slot-scope="props">
                    <slot name="expand" :scope="props.scope">expand</slot>
<!--                    <el-form label-position="left" inline class="demo-table-expand">-->
<!--                      <el-form-item label="商品名称">-->
<!--                        <span>{{ props.row.name }}</span>-->
<!--                      </el-form-item>-->
<!--                    </el-form>-->
                  </template>
                </el-table-column>
                <el-table-column
                    type="index"
                    v-if="!hideIndex"
                >
                </el-table-column>

                <el-table-column
                      v-for="item in tableHead"
                      :prop="item.prop"
                      :label="item.label"
                      :width="item.width"
                      :key="item.prop"
                      :show-overflow-tooltip="item.showOverflowTooltip"
                  >
                      <template slot-scope="scope">
                          <slot :name="item.prop" :scope="scope">{{scope.row[item.prop]}}</slot>
                      </template>
                  </el-table-column>
            </el-table>
        </div>
        <div class="common-form-pagination" ref="page_wrap" v-if="!hidePagination">
            <el-pagination
                background
                layout="prev, pager, next"
                @current-change="currentChange"
                @size-change="sizeChange"
                :page-size="pagePagination.pageSize"
                :total="pagePagination.pageTotal">
            </el-pagination>

        </div>
    </div>
</template>

<script>
import api from '@/api/common.api'
import opts from './formOpts.component'
import _ from 'lodash'
export default {
    props: {
        isExpand: {
            default: false
        },
        autoGet: {
            default: true
        },
        tableHead: {
            default: ()=>{
                return []
            }
        },
        defaultData: {
            default: ()=>{
                return []
            }
        },
        hidePagination: {
            default: false
        },
        hideTable: {
            default: false
        },
        hideIndex: {
            default: false
        },
        tableUrl: {
            default: ""
        },
        tableHeight: {
            default: 700
        },
        outterPageSize: {
            default: 15
        },
        fieldsList: {
            default: []
        },
        customTableParams: {
          default: ()=>{
            return {}
          }
        }
    },
    components: {opts},
    data() {
        return {
          keyList: [],
          c_key: new Date(),
          pagePagination: {
              pageSize: 15,
              pageNum: 1,
              pageTotal: 0
          },
          tableData: [],
          form: {},
          tableParams: {}
        }
    },
    computed: {
    },
    created(){
      this.clearForm()
    },
    mounted() {
      if (this.outterPageSize) {
        this.pagePagination.pageSize = this.outterPageSize
      }
      if(this.autoGet && this.defaultData.length > 0){
            this.getTableData()
        }
        if (this.defaultData.length) {
          this.getTableData({}, this.defaultData)
        }
      //   let alheight = this.$refs.common_form_wrap.style.height
      //   let h = this.$refs.form_wrap.style.height + this.$refs.page_wrap.style.height
      //   this.tableHeight = alheight - h
      // console.log(11,this.tableHeight )
    },
    watch: {
        form:{
            deep: true,
            handler: function(e){
              this.$emit('change', this.form)
            }
        }
    },
    methods:{
      clearForm (code) { //针对单项清除
        if(code){
          let k = code+code
          for(let i in this.keyList){
            if(this.keyList[i].indexOf(k)>-1){
              this.keyList[i]= this.fieldsList[i].code+this.fieldsList[i].code+new Date()
              break
            }
          }
          this.form[code] = ''

        }else{ //清除所有项
          this.keyList=[]
          this.fieldsList.forEach(v=>{
            let key = v.code+v.code+new Date()
            this.keyList.push(key)
          })
          this.form = {}
        }
      },
      getTableData(params, data){
          if(!params){
              params= _.cloneDeep(this.form)
          }else{
              this.tableParams= params
          }
          if(data){
              this.tableData= data
              return
          }
          if(this.tableUrl){
              params.pageNum= this.pagePagination.pageNum
              params.pageSize= this.pagePagination.pageSize
              if(params.date && params.date.length){
                  params.beginDate= params.date[0]
                  params.endDate= params.date[1]
                  params.beginTime= params.date[0]
                  params.endTime= params.date[1]
              }
              console.log(this.customTableParams)
              params= _.merge(this.tableParams, this.customTableParams, params)
              api.getTable(this.tableUrl, params).then(res=>{
                  this.tableData= res.content.rows
                  this.pagePagination.pageTotal= res.content.total

              }).finally((e)=>{
                this.$emit('gotTheData', e)
              })
          }
      },
      currentChange(e){
          this.pagePagination.pageNum= e
          this.getTableData()
          this.$emit('pageChange', e)
      },
      sizeChange(){

      }
    }
}

</script>
<style lang='stylus'>
    .el-table__expand-column .cell {
      display: none;
    }

    .common-form-item{
        display: inline-block;
        margin-bottom: 10px;
        margin-right: 10px;
        .common-form-label{
            display: inline-block;
            color: #43E2FF;
            width: 80px;
            text-align: right;
            white-space: nowrap;
            vertical-align: middle;
        }
        .el-button{
            border-radius: 0;
        }
    }
    .tableOneRow{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .common-form-table{
        .el-table{
            background: transparent!important;
            tr{
              background: transparent!important;
              .el-table, .el-table__expanded-cell{
                background: transparent!important;
              }
            }
          .cell{
            //line-height: normal;
          }
        }
        .el-table--border, .el-table--group, .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed, .el-table td, .el-table th.is-leaf, .el-table--border::after{
            border-color: transparent!important;
            padding: 0;
        }
        .el-table th{
            border-bottom: 1px solid #008FFD!important;
            border-top: 1px solid #008FFD!important;
            background: #0d364d!important;
            color: #b6c3c9!important;
        }
        .el-table__row{
            background: transparent!important;
            color: #fff!important;
        }
        .el-table__row--striped{
            background: #71CDF9!important;
            color: #fff!important;
        }
        .el-table--striped .el-table__body tr td{
            font-size: 44px!important;
            padding: 55px 0!important;
            .cell{
                line-height: 55px!important;
            }
        }
        .el-table--striped .el-table__body tr.el-table__row--striped td{
            background: #144066!important;
            color: #fff!important;
            font-size: 44px!important;
            padding: 55px 0!important;
            .cell{
                line-height: 55px!important;
            }
        }
        .el-table--enable-row-hover .el-table__body tr:hover>td{
            background: #144066!important;
        }
        .el-table--border::after, .el-table--group::after, .el-table::before{
            background-color: #0d364d!important;
        }
        .el-table__header{
            font-size: 40px;
            .cell{
                line-height: 50px!important;
                height: 55px!important;
            }
        }
    }
    .common-form-pagination{
        margin-top: 10px;
        .el-pagination{
            text-align: right;
        }
    }
    @media screen and (max-width: 1920px) {
        .common-form-table{
            .el-table__header{
                font-size: 14px!important;
                .cell{
                    line-height: unset!important;
                    height: unset!important;
                }
            }
            .el-table--striped .el-table__body tr td{
                font-size: 14px!important;
                padding: 5px 0!important;
                .cell{
                    line-height: 18px!important;
                }
            }
            .el-table--striped .el-table__body tr.el-table__row--striped td{
                background: #144066!important;
                color: #fff!important;
                font-size: 14px!important;
                padding: 5px 0!important;
                .cell{
                    line-height: 18px!important;
                }
            }
        }

    }
</style>
